<template>
  <div class="attendance-container">
    <div class="attendance-header">
<!--      打卡按钮-->
      <el-button  v-permission="['attendance:checkIn']" type="success" icon="el-icon-check" @click="dak = true" class="float-right-btn">打开打卡记录 </el-button>
<!--      打卡卡片-->
      <el-drawer
          title="打卡记录"
          :visible.sync="dak"
          direction="rtl"
          size="50%">
        <div class="attendance-content">
          <!-- 打卡面板 -->
          <div class="checkin-panel">
            <div class="checkin-info">
              <h3>今日打卡</h3>
              <div class="checkin-times" v-if="checkInTime">
                <p>上班时间: {{ checkInTime }}</p>
                <p v-if="checkOutTime">下班时间: {{ checkOutTime }}</p>
              </div>
            </div>

            <el-button
                :type="isCheckedIn ? 'primary' : 'danger'"
                round
                class="main-checkin-btn"
                @click="handleCheckIn"
                :loading="loading">
              {{ isCheckedIn ? '签退' : '未打卡' }}
            </el-button>
          </div>
        </div>
      </el-drawer>

<!--      搜索-->
      <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
        <el-form-item label="用户ID" prop="userId">
          <el-input
            v-model="queryParams.userId"
            placeholder="请输入用户ID"
            clearable
            @keyup.enter.native="handleQuery"
          />
        </el-form-item>

        <el-form-item label="打卡时间" prop="checkInTime">
          <el-date-picker
            v-model="queryParams.checkTime"
            type="datetimerange"
            range-separator="至"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
            value-format="yyyy-MM-dd HH:mm:ss"
            >
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
          <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form>


      <!-- 考勤记录表格 -->
      <div class="attendance-table" v-if="recordList && recordList.length > 0">
        <h3>考勤记录</h3>
        <el-table :data="recordList" style="width: 100%" v-loading="loading">
          <el-table-column prop="userId" label="用户ID" width="80"></el-table-column>
          <el-table-column prop="checkInTime" label="上班时间" width="180">
            <template slot-scope="scope">
              {{ scope.row.checkInTime ? scope.row.checkInTime : '-' }}
            </template>
          </el-table-column>
          <el-table-column prop="checkOutTime" label="下班时间" width="180">
            <template slot-scope="scope">
              {{ scope.row.checkOutTime ? scope.row.checkOutTime : '-' }}
            </template>
          </el-table-column>
          <el-table-column prop="status" label="状态" width="120">
            <template slot-scope="scope">
        <span :class="'status-' + getStatusClass(scope.row.status)">
          {{ scope.row.status }}
        </span>
            </template>
          </el-table-column>
          <el-table-column prop="remark" label="备注"></el-table-column>
        </el-table>
        <pagination
          v-show="total>0"
          :total="total"
          :page.sync="queryParams.pageNum"
          :limit.sync="queryParams.pageSize"
          @pagination="getlist"
        />

      </div>
      <div v-else class="attendance-table">
        <h3>考勤记录</h3>
        <el-empty description="暂无考勤记录"></el-empty>
      </div>










    </div>






  </div>
</template>

<script>

import {getlist,dak} from '@/api/system/attendance'
export default {
  name: "Attendance",
  data() {
    return {
      // 是否已打卡
      isCheckedIn: false,

      // 上班时间
      checkInTime: '',
      // 下班时间
      checkOutTime: '',
      // 打卡记录抽屉
      dak: false,

      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 考勤打卡记录表格数据
      recordList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 5,
        userId: null,
      },
    }

  },
  methods: {
    // 处理打卡操作
    handleCheckIn() {
      this.loading = true;

      // 模拟打卡逻辑
      setTimeout(() => {
        const now = new Date().toLocaleTimeString('zh-CN', { hour12: false });
        dak().then(response => {
          console.log("获得后端返回");
          if (!this.isCheckedIn) {
            // 打卡操作
            this.isCheckedIn = true;
            this.checkInTime = now;
            this.$message.success('打卡成功');
          } else {
            // 签退操作
            this.checkOutTime = now;
            this.$message.success('签退成功');
          }

        }).catch(error => {
          console.error("打卡失败:", error);
          this.$message.error("请求失败")
        });




        this.loading = false;


      }, 1000);
      this.getlist()
    },
    startDak(){

    },




    // // 计算工时
    // calculateWorkHours(checkIn, checkOut) {
    //   // 简单计算工时
    //   if (!checkIn || !checkOut) return '';
    //   return '8小时';
    // },
    // // 计算状态
    // calculateStatus(checkIn, checkOut) {
    //   // 简单判断状态
    //   if (!checkIn || !checkOut) return '异常';
    //   return '正常';
    // },

    // 获得考勤记录列表
    getlist() {
      this.loading = true;
      console.log("发送的数据",this.queryParams)
      getlist(this.queryParams).then(response => {
        console.log("获得后端返回", response);
        this.total=response.total
        this.recordList = response.rows;
        // 数据格式化处理
        if (this.recordList) {
          this.recordList = this.recordList.map(item => {
            return {
              ...item,
              checkInTime: item.checkInTime ? item.checkInTime.split('T')[0] : null,
              checkOutTime: item.checkOutTime ? item.checkOutTime.split('T')[0] : null
            };
          });
        }
        console.log(this.recordList)
        this.loading = false;
      }).catch(error => {
        console.error("获取考勤列表失败:", error);
        this.loading = false;
      });
    },
    getStatusClass(status) {
      switch (status) {
        case '正常':
          return 'normal';
        case '上午迟到':
        case '下午早退':
          return 'late';
        case '异常':
          return 'abnormal';
        default:
          return 'abnormal';
      }
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1
      this.getlist()
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm")
      this.handleQuery()
    },




  },
  created() {
    this.getlist();
  },
}
</script>

<style scoped lang="scss">
.attendance-container {
  padding: 20px;
  background-color: #fff;
  border-radius: 4px;
}

.attendance-header {
  margin-bottom: 20px;

  h2 {
    margin: 0;
    color: #333;
  }
}

.attendance-content {
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.checkin-panel {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 30px;
  background-color: #f5f7fa;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.checkin-info {
  h3 {
    margin-top: 0;
    margin-bottom: 20px;
    color: #333;
  }
}

.checkin-times {
  p {
    margin: 10px 0;
    font-size: 14px;
    color: #666;
  }
}

.main-checkin-btn {
  width: 150px;
  height: 150px;
  font-size: 20px;
  border-radius: 50%;
}

/* 添加悬浮按钮样式 */
.float-right-btn {
  position: fixed;
  top: 100px;
  right: 20px;
  z-index: 1000; /* 确保按钮在其他内容之上 */
}
/* 新增：考勤表格样式 */
.attendance-table {
  margin-top: 30px;

  h3 {
    margin-bottom: 15px;
    color: #333;
  }

  .status-normal {
    color: #4CAF50;
  }

  .status-late {
    color: #FF9800;
  }

  .status-early {
    color: #FF5722;
  }

  .status-abnormal {
    color: #F44336;
  }
}

</style>
